<template>
    <div class="main">
        <NavHeader></NavHeader>
        <div class="body">
            <Menu theme="dark" :active-name="menuName" :open-names="openMenu" class="menu-main margin-right">
                <MenuItem name="default" to="/">
                    <Icon type="md-home"></Icon>
                    首页
                </MenuItem>
                <MenuGroup title="内容管理">
                    <MenuItem name="distribution" to="/distribution">
                        <Icon type="md-bookmark"></Icon>
                        数据分发
                    </MenuItem>
                    <Submenu name="post">
                        <template slot="title">
                            <Icon type="md-paper"/>
                            主题管理
                        </template>
                        <MenuItem name="post-list" to="/post/list">全部主题</MenuItem>
                        <MenuItem name="post-report" to="/post/report">举报管理</MenuItem>
                    </Submenu>
                    <Submenu name="comment">
                        <template slot="title">
                            <Icon type="md-chatbubbles"/>
                            评论管理
                        </template>
                        <MenuItem name="comment-list" to="/comment/list">全部评论</MenuItem>
                        <MenuItem name="comment-report" to="/comment/report">举报管理</MenuItem>
                    </Submenu>
                    <Submenu name="user">
                        <template slot="title">
                            <Icon type="md-person"/>
                            用户管理
                        </template>
                        <MenuItem name="user-list" to="/user/list">全部用户</MenuItem>
                        <MenuItem name="user-report" to="/user/avatar">头像审核</MenuItem>
                        <MenuItem name="user-report" to="/user/report">举报管理</MenuItem>
                        <MenuItem name="user-report" to="/user/disabled-talk">禁言管理</MenuItem>
                    </Submenu>
                    <Submenu name="report">
                        <template slot="title">
                            <Icon type="md-analytics"/>
                            报表查询
                        </template>
                        <MenuItem name="report-post-audit-all" to="/report/post/audit-all">主题审核报表(全部)</MenuItem>
                        <MenuItem name="report-post-rollback-dis" to="/report/post/rollback-dis">主题打回报表(分发)</MenuItem>
                        <MenuItem name="report-post-audit-dis" to="/report/post/audit-dis">主题审核报表(分发)</MenuItem>
                        <MenuItem name="report-post-report-all" to="/report/post/report-all">主题举报报表(全部)</MenuItem>
                    </Submenu>
                </MenuGroup>
                <MenuGroup title="系统管理">
                    <MenuItem name="admin-list" to="/admin/list">用户管理</MenuItem>
                </MenuGroup>
            </Menu>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>

</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";

    import NavHeader from '@/components/NavHeader.vue'

    @Component({
        components: {NavHeader}
    })

    export default class Home extends Vue {
        name: string = 'home';

        msg: string = 'home-msg';

        menuName: string = 'default';

        openMenu: Array<string> = [];

        created(): void {
            this.menuName = this.$route.name as string;
            this.openMenu = this.$route.meta.menu;
        }
    }
</script>

<style scoped lang="scss">
    @import "../assets/scss/vars";

    .body {
        min-height: 800px;
        display: flex;

        .menu-main {
            padding-top: 5px;
            min-width: 250px;
            max-width: 250px;
        }

        .content {
            flex-grow: 1;
            margin-bottom: 2 * $base;
        }
    }
</style>